<template>
  <div>
    <!-- 页头 -->
    <div class="header">
      <div class="bgc" :style="{backgroundImage:'url('+artistInfo.avatar_big+')'}"></div>
      <div class="shade"></div>
      <div class="artist-info">
        <img :src="artistInfo.avatar_middle" alt />
        <div>{{artistInfo.name}}</div>
      </div>
    </div>
    <!-- 歌曲列表 -->
    <div>
        <van-cell class="music-cell" v-for="item in songList" :key="item.song_id">
            {{item.title}}
        </van-cell>
    </div>
  </div>
</template>

<script>
import { getArtistMusicList } from "@api/music-api";
export default {
  created() {
    getArtistMusicList(this.$route.params.tinguid).then(res => {
      this.artistInfo = res.artistinfo;
      this.songList = res.songlist;
    });
  },
  data() {
    return {
      artistInfo: {},
      songList: []
    };
  }
};
</script>

<style lang="less" scoped>
.header {
  height: 200px;
  position: relative;
  overflow: hidden;
  .bgc {
    position: absolute;
    top: 20px;
    left: 70px;
    width: 100%;
    height: 100%;
    filter: blur(6px);
    transform: scale(2);
    z-index: -1;
  }
  .shade {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(235, 237, 240, 0.6);
    z-index: -1;
  }
  .artist-info {
    text-align: center;
    padding-top: 45px;
    font-size: 22px;
    img {
      height: 80px;
      border-radius: 50%;
    }
  }
}

.music-cell{
    font-size: 16px
}
</style>